<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>*</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/examples/closures.js"></script>

<style type="text/css">
body {
	text-align: center;
}

#element {
	width: 200px;
	height: 200px;
	margin: 100px auto;
	background-color: #f5f5f5;
	border: 1px solid #aaa;
}
</style>

</head>

<body>
	<div class="post">
		<div class="clearfix" style="margin-bottom: 20px;">
			<div class="info">
				<h2>
					<a href="http://www.quizzpot.com/2009/03/que-son-los-closures/">¿Qué
						son los Closures?</a>
				</h2>
				<span class="smalltext">Mar 05, 2009 | <a
					href="http://www.quizzpot.com/category/es/" title="Español">Español</a>
					| By <a href="http://www.quizzpot.com/author/admin/"
					title="Posts by Crysfel" rel="author">Crysfel</a> | <a
					href="http://www.quizzpot.com/2009/03/que-son-los-closures/#comments"
					title="Comment on ¿Qué son los Closures?">15 Comments</a> | <a
					href="http://www.quizzpot.com/2009/03/what-are-the-closures/">Read
						in English</a>
				</span>
				<p>Mediante los closures podemos resolver varios problemas
					cuando desarrollamos componentes o alguna aplicación, es importante
					conocer este concepto aplicado a JavaScript.</p>
			</div>
			<div class="tns">
				<div>
					<a href="http://www.quizzpot.com/2009/03/que-son-los-closures/"><img
						src="http://www.quizzpot.com/wp-content/uploads/2009/03/closures-tns.jpg"
						alt="¿Qué son los Closures?"></a>
				</div>
			</div>
		</div>

		<div class="author clearfix">
			<img alt=""
				src="http://1.gravatar.com/avatar/7344c04fee0e5535e239b2a83623041a?s=80&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&amp;r=G"
				class="avatar avatar-80 photo" height="80" width="80"> <strong>Author:
				<a href="http://www.crysfel.com ">Crysfel</a>
			</strong>
			<p>
				I'm a software developer with 6+ years of experience, when I'm not
				developing software I may be writing a tutorial, you can follow me
				on <a href="http://twitter.com/crysfel">twitter</a>
			</p>
		</div>

		<div class="control-panel">
			<p class="clearfix"></p>
		</div>

		<div class="video">
			<object width="504" height="380">
				<param name="allowfullscreen" value="true">
				<param name="allowscriptaccess" value="always">
				<param name="movie"
					value="http://vimeo.com/moogaloop.swf?clip_id=3482047&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=474747&amp;fullscreen=1">
				<embed
					src="http://vimeo.com/moogaloop.swf?clip_id=3482047&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=474747&amp;fullscreen=1"
					type="application/x-shockwave-flash" allowfullscreen="true"
					allowscriptaccess="always" width="504" height="380">
			</object>
		</div>

		<p>Un closure es la manera en como una función dentro de otra
			función contenedora puede hacer referencia a las variables después de
			que la función contenedora ha terminado de ejecutarse. Este concepto
			puede ser un poco difícil de comprender y de explicar así que veamos
			un ejemplo.</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="keyword">function</span><span>&nbsp;sayHi(seconds){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">var</span><span>&nbsp;hi&nbsp;=&nbsp;</span><span
						class="string">'Hi&nbsp;folks!'</span><span>;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(<span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.info(hi);&nbsp;<span
						class="comment">//Referenciando&nbsp;a&nbsp;la&nbsp;variable&nbsp;‘hi’</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;},seconds*1000);&nbsp;&nbsp;</span></li>
				<li class="alt"><span>}&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>sayHi(2);&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">function sayHi(seconds){
	var hi = 'Hi folks!';

	setTimeout(function(){
		console.info(hi); //Referenciando a la variable ‘hi’
	},seconds*1000);
}

sayHi(2);
</pre>
		<p>En el ejemplo anterior se puede ver claramente como la función
			“sayHi” termina su ejecución y después de 1 segundo se ejecuta la
			función interna mostrando el mensaje contenido en la variable “hi”,
			la cual pertenece a la función contenedora, a esto se le llama
			closure.</p>
		<h3>Ocultar variables globales</h3>
		<p>Muchas veces declaramos variables en el “global scope”, es una
			mala práctica hacer esto por que estas variables pueden interferir
			con algunas librerías o con el código de algún otro miembro de
			nuestro equipo. Si utilizamos una función anónima auto ejecutable y
			hacemos uso de closures podemos resolver de una manera sencilla este
			problema. A continuación se muestra como hacer esto:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span>(</span><span
						class="keyword">function</span><span>(args){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">var</span><span>&nbsp;thisWasGlobal&nbsp;=&nbsp;</span><span
						class="string">'closure!'</span><span>;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;window.onload&nbsp;=&nbsp;<span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.info(thisWasGlobal);&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span>})();&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">(function(args){
	var thisWasGlobal = 'closure!';

	window.onload = function(){
		console.info(thisWasGlobal);
	}

})();
</pre>
		<p>El código anterior encapsula las variables declaradas dentro de
			la función anónima, de esta manera las variables estarán en un scope
			donde no hay peligro que sobre escriban a otras variables.</p>
		<h3>Closures y Scope</h3>
		<p>Se ha mostrado que un closure permite referenciar variables que
			existen y pertenecen a la función contenedora. Es importante
			mencionar que al hacer un closure, éste toma el último valor de la
			variable de la función contenedora. Un caso muy común es cuando
			utilizamos un ciclo o loop.</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span>window.onload&nbsp;=&nbsp;</span><span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">var</span><span>&nbsp;el&nbsp;=&nbsp;document.getElementById(</span><span
						class="string">'element'</span><span>);&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">var</span><span>&nbsp;events&nbsp;=&nbsp;[</span><span
						class="string">'click'</span><span>,</span><span class="string">'mouseover'</span><span>,</span><span
						class="string">'mouseout'</span><span>];&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">for</span><span>(</span><span class="keyword">var</span><span>&nbsp;i=0;i&lt;events.length;i++){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">var</span><span>&nbsp;item&nbsp;=&nbsp;events[i];&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el[<span
						class="string">'on'</span><span>+item]&nbsp;=&nbsp;</span><span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.info(<span
						class="string">'event:&nbsp;'</span><span>+item);&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
				<li class="alt"><span>}&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">window.onload = function(){
	var el = document.getElementById('element');
	var events = ['click','mouseover','mouseout'];

	for(var i=0;i&lt;events.length;i++){
		var item = events[i];
		el['on'+item] = function(){
			console.info('event: '+item);
		}
	}
}
</pre>
		<p>Al ejecutar el código anterior se agregan los eventos
			contenidos en el arreglo “events” al elemento seleccionado, el
			problema se ocasiona cuando se imprime en la consola el evento que se
			ejecuta pues siempre imprime lo mismo, en este caso “mouseout”, esto
			sucede porque la variable “item” contiene a “mouseout” como último
			valor asignado.</p>
		<p>Para solucionar este problema es necesario crear un scope
			diferente para cada iteración del ciclo, de esta manera se crearán
			variables diferentes; esto se realiza mediante una función anónima
			que se auto ejecute. Si tienes alguna duda en cuanto al concepto
			scope te recomiendo ver el tema anterior. El código quedaría de la
			siguiente manera.</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span>window.onload&nbsp;=&nbsp;</span><span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">var</span><span>&nbsp;el&nbsp;=&nbsp;document.getElementById(</span><span
						class="string">'element'</span><span>);&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">var</span><span>&nbsp;events&nbsp;=&nbsp;[</span><span
						class="string">'click'</span><span>,</span><span class="string">'mouseover'</span><span>,</span><span
						class="string">'mouseout'</span><span>];&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">for</span><span>(</span><span class="keyword">var</span><span>&nbsp;i=0;i&lt;events.length;i++){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(<span
						class="keyword">function</span><span>(){&nbsp;</span><span
						class="comment">//función&nbsp;anónima&nbsp;crea&nbsp;un&nbsp;nuevo&nbsp;scope</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">var</span><span>&nbsp;item&nbsp;=&nbsp;events[i];&nbsp;</span><span
						class="comment">//item&nbsp;pertenece&nbsp;a&nbsp;la&nbsp;function&nbsp;anónima</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el[<span
						class="string">'on'</span><span>+item]&nbsp;=&nbsp;</span><span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.info(<span
						class="string">'event:&nbsp;'</span><span>+item);&nbsp;</span><span
						class="comment">//un&nbsp;closure&nbsp;de&nbsp;la&nbsp;función&nbsp;anónima</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})();&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
				<li class="alt"><span>}&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">window.onload = function(){
	var el = document.getElementById('element');
	var events = ['click','mouseover','mouseout'];

	for(var i=0;i&lt;events.length;i++){
		(function(){ //función anónima crea un nuevo scope
			var item = events[i]; //item pertenece a la function anónima
			el['on'+item] = function(){
				console.info('event: '+item); //un closure de la función anónima
			}
		})();
	}
}
</pre>
		<p>Si ejecutamos el código anterior veremos que ahora el evento
			correcto se imprime en la consola.</p>
		<h3>Conclusiones</h3>
		<p>En este tema vimos que es un closure y cuán útil es cuando
			introducimos el concepto de scope, esto es algo que debemos aprender
			y tener en cuenta a la hora de desarrollar nuestros proyectos.</p>
		<p>
			El tema de closures es complicado, te recomiendo darle una leída a <a
				href="http://jibbering.com/faq/faq_notes/closures.html">“JavaScript
				Closures” escrito por Jim Jey</a>, es un excelente material que debes
			leer.
		</p>
		<p>Como siempre puedes dejar tus dudas o sugerencias en los
			comentarios, y no olvides de votar en tu red social preferida.</p>
		<div class="wp_twitter_button"
			style="float: right; margin-left: 10px;">
			<iframe
				src="http://platform.twitter.com/widgets/tweet_button.html#_=1323061590796&amp;count=horizontal&amp;counturl=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fque-son-los-closures%2F&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fque-son-los-closures%2F&amp;text=%C2%BFQu%C3%A9%20son%20los%20Closures%3F%20%C2%BB%20Quizzpot&amp;url=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fque-son-los-closures%2F&amp;via=quizzpot"
				allowtransparency="true" frameborder="0" scrolling="no"
				class="twitter-share-button twitter-count-horizontal"
				style="width: 110px; height: 20px;"
				title="Twitter For Websites: Tweet Button"></iframe>
		</div>
		<iframe
			src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fque-son-los-closures%2F&amp;layout=standard&amp;show_faces=true&amp;width=300&amp;height=25&amp;action=like&amp;font=trebuchet ms&amp;colorscheme=light"
			id="fbLikeIframe" name="fbLikeIframe" scrolling="no" frameborder="0"
			allowtransparency="true" class="fbLikeContainer"
			style="border: none; overflow: hidden; width: 300px; height: 25px; display: inline;"></iframe>
	</div>
	<div id="element"></div>
</body>
</html>